.wrap{
	width: 100%;
	height: 100vh;
	background: url(../img/bg.png) no-repeat center;
	.inner{
		width: 646px;
		margin: 0 auto;
		padding-top: 150px;
		.title{
			font-size: 42px;
			color: #05fffc;
			text-align: center;
		}
		.login{
			width: 646px;
			height: 441px;
			background: url(../img/bg1.png) no-repeat center;
			margin: 100px auto 0;
			box-sizing: border-box;
			padding: 35px 65px;
			.sub-title{
				text-align: center;
				font-size: 34px;
				color: #05ffff;
			}
			.item{
				width: 504px;
				height: 57px;
				box-sizing: border-box;
				border: 1px solid #0d5594;
				border-radius: 5px;
				margin:32px auto 0;
				background: url(../img/person.png) no-repeat 12px center;
				padding-left: 48px;
				padding-top: 17px;
				input{
					width: 100%;
					height: 23px;					
					border: none;
					outline: none;
					background: transparent;
					box-sizing: border-box;
					border-left: 2px solid #0167c5;
					text-indent: 0.5em;
					color: #fff;
					&:placeholder{
						color: #0167c5;
						font-size: 16px;
					}
				}
				&.item1{
					background: url(../img/lock.png) no-repeat 12px center;
				}
			}
			.remenber{
				width: 504px;
				margin: 15px auto 0;
				color: #1ad1ff;
				font-size: 16px;
				a{
					color: #1ad1ff;
					font-size: 16px;
				}
			}
			.btn{
				margin-top: 32px;
				button{
					width: 504px;
					height: 56px;
					background: #1adbfe;
					font-size: 25px;
					color: #0a3d75;
					border: none;
					outline: none;
					border-radius: 5px;
				}
			}
		}
	}
}
.wrap1{
	.top{
		width: 100%;
		height: 60px;
		line-height: 60px;
		background-image: linear-gradient(to right, #134097, #4dbaf0 );
		.left{
			img{
				width: 34px;
			}
			font-size: 24px;
			color: #fff;
		}
		.right{
			a{
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				img{
					margin-left: 20px;
					vertical-align: -1px;
				}
			}			
		}
	}
	.nav{
		width: 100%;
		height: 45px;
		background: #ebf4fa;
		line-height: 45px;
		color: #333333;
		font-size: 16px;
		a{
			margin-left: 15px;
			padding: 0 10px;
			position: relative;
			&.on{
				color: #144198;
				&::before{
					content: '';
					left: 0;
					right: 0;
					height: 43px;
					position: absolute;
					border-bottom: 2px solid #144198;
				}				
			}
			&:hover{
				color: #144198;
				&::before{
					content: '';
					left: 0;
					right: 0;
					height: 43px;
					position: absolute;
					border-bottom: 2px solid #144198;
				}	
			}
		}
	}
	.main{
		height: calc(100vh - 110px);
		position: relative;
		.box1{
			height: 100%;
		}
		.box2{
			position: absolute;
			top: 18px;
			left: 16px;
			width: 460px;
			height: 130px;
			background: #fff;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 15px;
			p{
				border-bottom: 1px solid #f1f1f1;
				line-height: 36px;
				font-size: 14px;
				color: #333333;
				&:last-child{
					border-bottom:none;
				}
				span{
					margin-left: 5px;
				}
				a{
					font-size: 14px;
					color: #144198;
					margin-left: 15px;
				}
			}
		}
		.box3{
			position: absolute;
			bottom: 18px;
			left: 16px;
			width: 620px;
			height: 343px;
			background: #ebf4fa;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 18px 20px;
			.choose{
				font-size: 14px;
				color: #333333;
				padding-left: 40px;
				p{
					margin-bottom: 10px;
				}
				select,input{
					width: 120px;
					height: 20px;
					border: 1px solid #2f7bc2;
					border-radius: 5px;
					vertical-align: middle;
					outline: none;
				}		
				input[type=range] {
					appearance: none;
					height: 0px;
					border-radius: 1px; /*将轨道设为圆角的*/				   
				}
				span{
					margin: 0 10px 0 15px;
				}
				button{
					width: 60px;
					height: 30px;
					border: none;
					color: #fff;
					background: #2f7bc2;
					border-radius: 10px;
					margin-left: 35px;
				}
			}
			.info{
				padding: 14px 74px 14px 22px;
				background: #fff;
				border-radius: 10px;
				position: relative;
				.table{
					.head{
						line-height: 40px;
						border-bottom: 1px solid #2f7bc2;	
					}
					.content{
						p{
							border-bottom: 1px solid #2f7bc2;
							height: 50px;
							padding-top: 8px;
							box-sizing: border-box;
							&:last-of-type{
								border: none;
							}
						}
					}
					border: 1px solid #2f7bc2;
					.w1{
						width: 96px;
					}
					.w2{
						width: 100px;
					}
					.w3{
						width: 70px;
					}
					span{
						display: inline-block;
						text-align: center;
						font-size: 14px;
						color: #333333;
						&.lh{
							vertical-align: 8px;
						}
					}
				}	
				.page{
					position: absolute;
					right: 20px;
					top: 48px;
					p{
						width: 26px;
						font-size: 14px;
						color: #fff;
						text-align: center;
						background: #2f7bc2;
						margin-bottom: 20px;
						border-radius: 5px;
						line-height: 16px;
						padding: 6px 0;
						cursor: pointer;
					}
				}
			}
		}
		.tan{
			display: none;
			width: 410px;
			height: 300px;
			background: #fff;
			position: absolute;
			top: 150px;
			left: 300px;
			border-radius: 10px;
			padding: 0 15px;
			box-sizing: border-box;
			.inner{
				position: relative;
				&::before{
					content: '';
					position: absolute;
					left: -35px;
					margin-top: -15px;
					top: 50%;
					width: 0;
					height: 0;
					border-top: 15px solid transparent;
					border-bottom: 15px solid transparent;
					border-right: 20px solid #fff;
				}
			}
			.head{
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #144198;
				font-size: 22px;
				font-weight: bold;				
			}
			ul{
				li{
					font-size: 10px;
					color: #333333;
					border-bottom: 1px solid #f1f1f1;
					line-height: 28px;
					&:last-of-type{
						border-bottom: none;
					}
					span{
						&:first-of-type{
							display: inline-block;
							width: 320px;
						}
						&.ing{
							color: #144198;
						}
					}
				}
			}
			.work{
				font-size: 12px;
				color: #333;
			}
			.btn{
				text-align: center;
				margin-top: 20px;
				button{
					width: 95px;
					height: 30px;
					border: none;
					outline: none;
					background: #2f7bc2;
					border-radius: 10px;
					color: #fff;
					font-size: 12px;
					margin-right: 20px;
					&:last-of-type{
						margin-right: 0;
					}
				}
			}
		}
	}
}
